//载入基础页面
{extend name="common/base" /}

//页面单独CSS
{block name="CustomCSS"}
<link rel="stylesheet" href="__STATIC__/vendors/css/datatables/datatables.min.css">
{/block}

//页面单独JS
{block name="CustomJS"}
<script src="__STATIC__/vendors/js/datatables/datatables.min.js"></script>
<script src="__STATIC__/vendors/js/noty/noty.min.js"></script>
<script src="__STATIC__/vendors/js/progress/circle-progress.min.js"></script>
<script src="__STATIC__/vendors/js/EZView/EZView.js"></script>
<script src="__STATIC__/vendors/js/EZView/draggable.js"></script>
<script type="text/javascript">
    (function ($) {
    'use strict';
    // ------------------------------------------------------- //
    // Auto Hide
    // ------------------------------------------------------ //    
        $(function () {
            //定义表格
            var table = $('#table').DataTable({
                language: {
                    "url": "__STATIC__/vendors/js/datatables/cn.json"
                },
                lengthMenu: [
                    [10, 15, 20, -1],
                    [10, 15, 20, "所有"]
                ],//分页数目
                columnDefs: [
                    { "orderable": false, "targets": 9 }//禁止排序
                ]
            });
        });

        var d = $("#circle").circleProgress({
	        value: 0.87,
	        size: 150,
	        startAngle: -Math.PI / 2,
	        thickness: 14,
	        lineCap: "round",
	        emptyFill: "#f0eff4",
	        fill: {
            	gradient: ["#f9a58d", "#e76c90"]
        	}
	    }).on("circle-animation-progress", function(f, e) {
	        $(this).find(".percent").html(Math.round(87 * e) + "<i>%</i>")
	    });

        //文件预览类
        $('.gallery').EZView();

    })(jQuery);
</script>
{/block}

//页面名称
{block name="PageName"}
月度市场计划详情
{/block}

//自定义Modal
{block name="Modal"}
{/block}

//主页面
{block name="main"}
<div class="row flex-row">
    <div class="col-xl-9 col-md-9 col-sm-12">
        <div class="widget has-shadow">
        	<div class="widget-header bordered d-flex align-items-center">
                <h2>{$monthPlan.name}</h2>
            </div>
            <div class="widget-body">
                <p>
                    <div class="about-infos d-flex flex-column">
                        <div class="row">
                            <div class="col-3">
                                <h4>计划周期：</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-6">
                                <div class="text-muted">
                                    {$monthPlan.start_date|date='Y年m月d日'}至{$monthPlan.end_date|date='Y年m月d日'}
                                </div>
                            </div>
                            <div class="col">
                            </div>
                        </div>
                        <hr style="border:1 dashed #987cb9" width="80%" color="#987cb9" size=1>
                        <div class="row">
                            <div class="col-3">
                                <h4>支持概览</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="text-primary mt-2 mb-2">上周期台次</div>
                                <div class="text-muted">
                                    {$monthPlan.declare}台
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-primary mt-2 mb-2">本周期单台支持</div>
                                <div class="text-muted">
                                    {$monthPlan.support}元/台
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-primary mt-2 mb-2">额外支持</div>
                                <div class="text-muted">
                                    {$monthPlan.add_support}元
                                </div>
                            </div>
                            <div class="col">
                                <div class="text-primary mt-2 mb-2">总支持</div>
                                <div class="text-muted">
                                    {$monthPlan.declare * $monthPlan.support + $monthPlan.add_support}元
                                </div>
                            </div>
                        </div>
                        <hr style="border:1 dashed #987cb9" width="80%" color="#987cb9" size=1>
                        <div class="row">
                            <div class="col-3">
                                <h4>特别要求</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col">
                                <div class="text-muted">
                                    {$monthPlan.note}
                                </div>
                            </div>
                        </div>
                    </div>
                </p>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-3 col-sm-12 ">
        <!-- Begin Widget 01 -->
        <div class="widget widget-01 has-shadow">
            <div class="widget-body no-padding">
                <h3>Happy Customers <span class="text-green">+24%</span></h3>
                <div class="circle" id="circle">
                	<canvas width="300" height="300" style="height: 150px; width: 150px;"></canvas>
                    <div class="percent">87<i>%</i></div>
                </div>
            </div>
        </div>
        <!-- End Widget 01 -->
    </div>
</div>
<div class="row flex-row">
    <div class="col-xl-12 col-12">
        <div class="widget has-shadow">
        	<div class="widget-header bordered d-flex align-items-center">
                <h2>{$monthPlan.name}</h2>
                <button type="button" class="btn btn-primary" onclick="javascript:window.location.href='/Project/create.html'">添加项目</button>
            </div>
            <div class="widget-body sliding-tabs">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="i-base-tab-1" data-toggle="tab" href="#i-tab-1" role="tab" aria-controls="i-tab-1" aria-selected="false"><i class="ion-clipboard mr-2"></i>市场计划</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="i-base-tab-2" data-toggle="tab" href="#i-tab-2" role="tab" aria-controls="i-tab-2" aria-selected="true"><i class="ion-at mr-2"></i>厂家文件</a>
                    </li>
                </ul>
                <div class="tab-content pt-3">
                    <div class="tab-pane fade active show" id="i-tab-1" role="tabpanel" aria-labelledby="i-base-tab-1">
                        <div class="table-responsive">
		                    <table id="table" class="table mb-0">
		                        <thead>
		                            <tr>
		                                <th>项目</th>
		                                <th>主题</th>
		                                <th>活动时间</th>
		                                <th>地点</th>
		                                <th>客流</th>
		                                <th>意向客</th>
		                                <th>订单</th>
		                                <th>预算</th>
		                                <th>报厂</th>
		                                <th>报厂金额</th>
		                            </tr>
		                        </thead>
		                        <tbody>
		                            {volist name="project" id="list"}
		                            <tr>
		                            	<td>{$list.mode}</td>
		                                <td>{$list.name}</td>
		                                <td>{$list.start_date|date='Y/m/d'} - {$list.end_date|date='Y/m/d'}</td>
		                                <td>{$list.place}</td>
		                                <td>{$list.kpi_task_1}</td>
		                                <td>{$list.kpi_task_2}</td>
		                                <td>{$list.kpi_task_3}</td>
		                                <td>{$list.budget|number_format=0}</td>
		                                <td>{$list.declare}</td>
		                                <td>{$list.amount_declared}</td>
		                            </tr>
		                            {/volist}
		                        </tbody>
		                    </table>
		                </div>
                    </div>
                    <div class="tab-pane fade" id="i-tab-2" role="tabpanel" aria-labelledby="i-base-tab-2">
                    	{volist name="planFiles" id="planFileList" mod="6"}
                            {eq name="mod" value="0"}<div class="row m-auto">{/eq}
                                <div class="col-xl-2 col-sm-4 col-6">
                                    <div class="c-icon">
                                        <img class="gallery" src="__STATIC__/img/fileicon/{$planFileList.ext}.png" href="__STORAGE__/{$planFileList.url}" width="80px">
                                    </div>
                                    <div class="c-class">
                                        {$planFileList.note}
                                    </div>
                                </div>
                            {eq name="mod" value="5"}</div>{/eq}
                            {eq name="$i" value="count($planFileList)"}</div>{/eq}
                        {/volist}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

